<template>
	<view class="">

		<view class="wrap">
			<view style="background-color: #FFFFFF; position: sticky; top: 0;z-index: 2;">
				<view class='box-title'>
					<view v-for="(item,index) in tabs":key= 'index' class='title' :class="selectIndex==index?'title1':''" @click='selectText(index)'>
						<text>{{item.name}}</text>
					</view>
				</view>
			<!-- 	<u-tabs-swiper :list="tabs" ref="tabs" :current="current" keyName="name" :is-scroll="false" lineWidth="50"
					@change="change" :activeStyle="{
						  color:'#173B42',
						  fontWeight:'bold',
						  transform:'scal(1.05)'
					  }" :inactiveStyle="{
						  color:'#666666 ',
						  transform:'scal(1)'
					  }">
				</u-tabs-swiper> -->

			</view>

			<swiper class="swiper-box" :current="swiperCurrent" >
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
						<view v-if="unmessageList.length > 0">
							<view class="news_list" v-for="(item, index) in unmessageList" :key="index"
								@longpress="longclick(item)" >
								<view class="msg-item">
									<view class="msg-title">
										<view class="msg-title-left">
											<image src="../../../static/mine/icon_notification@2x.png" mode="scaleToFill"></image>
											<text>{{item.title?item.title:''}}</text>
										</view>
										<view class="msg-title-right">{{item.dateShow}}</view>
									</view>


									<view class="html-content">
										<rich-text :nodes="item.content">
										</rich-text>
									</view>
									<view class='line'></view>
									<view class='info' @click="itemClick(item)">
										<text>查看详情</text>
										<u-icon name="arrow-right" color="#333" size="12" style='margin-top:5upx'></u-icon>
									</view>
								</view>
							</view>

							<u-loadmore :status="loadStatus[0]" @loadmore="reachBottom(0)"></u-loadmore>
						</view>

						<no-data v-if="unmessageList.length === 0"></no-data>

					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
						<view class="page-box" v-if="messageList.length > 0">

							<view class="news_list" v-for="(item, index) in messageList" :key="index"
								@longpress="longclick(item)">

								<view class="msg-item">
									<view class="msg-title">
										<view class="msg-title-left">
											<image src="../../../static/mine/icon_notification@2x.png" mode="scaleToFill"></image>
											<text>{{item.title?item.title:''}}</text>
										</view>
										<view class="msg-title-right">{{item.dateShow}}</view>
									</view>
									
									
									<view class="html-content">
										<rich-text :nodes="item.content">
										</rich-text>
									</view>
									<view class='line'></view>
									<view class='info'  @click="itemClick(item)">
										<text>查看详情</text>
										<u-icon name="arrow-right" color="#333" size="12" style='margin-top:5upx'></u-icon>
									</view>
									
								</view>

							</view>

							<u-loadmore :status="loadStatus[1]" @loadmore="reachBottom(1)"></u-loadmore>
						</view>

						<no-data v-if="messageList.length === 0"></no-data>

					</scroll-view>
				</swiper-item>

			</swiper>



		</view>
		<u-modal title="提示" content="" :show="showdelete" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close">

			<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">是否确认删除?</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		messageNoticelist,
		messageNoticedelete
	} from '../../../common/api.js';

	export default {
		data() {
			return {
				tabs: [{
						name: '未读(0)'
					},
					{
						name: '已读(0)'
					}
				],
				current: 0,
				swiperCurrent: 0,
				unmessageList: [],
				messageList: [],
				dx: 0,
				loadStatus: ['loadmore', 'loadmore'],
				unPageNo: 1,
				readPageNo: 1,
				pageNo: 1,
				pageSize: 10,
				unreadCount: 0,
				readCount: 0,
				type: '1',
				showdelete: false,
				id: '',
				selectIndex:0,
			}
		},
		methods: {
			// tab栏切换
			selectText(index){
				this.swiperCurrent = index
				this.selectIndex = index
				console.log(index,'index')
				let item = this.tabs[index];
				this.couponBusiness = item.stuta;
				if (index == 1) {
					this.type = '2';
					this.messageList = [];
				}else{
					this.type = '1';
					this.unmessageList = [];
					
				}
				this.pageNo = 1;
				this.getData();
			},
			// tab栏切换
			change(item) {
				console.log(item,111111111111)
				this.swiperCurrent = item.index;

				if (uni.$u.test.isEmpty(this.messageList)) {
					if (item.index == 1) {
						this.pageNo = this.readPageNo;
						this.type = '2';
						this.getData();
					}
				}

			},

			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},

			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			getData() {
				messageNoticelist({
					params: {
						type: this.type,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
					}
				}).then(res => {
					this.tabs[0].name = `未读(${res.unreadCount})`;
					this.tabs[1].name = `已读(${res.readCount})`;

					if (this.type == '1') {

						if (this.unPageNo == 1) {
							this.unmessageList = [];
							this.unPageNo++;

							this.loadStatus[0] = 'loadmore';

						} else {
							if (!uni.$u.test.isEmpty(res.vo)) {
								this.unPageNo++;

								this.loadStatus[0] = 'loadmore';
							} else {
								this.loadStatus[0] = 'nomore';
							}
						}

						this.unmessageList = this.unmessageList.concat(res.vo);

					} else {

						if (this.readPageNo == 1) {
							this.messageList = [];
							this.readPageNo++;

							this.loadStatus[1] = 'loadmore';

						} else {
							if (!uni.$u.test.isEmpty(res.vo)) {
								this.readPageNo++;

								this.loadStatus[1] = 'loadmore';
							} else {
								this.loadStatus[1] = 'nomore';
							}
						}

						this.messageList = this.messageList.concat(res.vo);
					}

				})
			},

			insuranceItemClick(item) {
				// getApp().globalData.vehicleData = item;
				// uni.navigateTo({
				// 	url: './maintainDetail?type=0&carId=' + item.carId
				// })
			},


			reachBottom(type) {
				this.loadStatus[type] = 'loading';

				switch (type) {
					case 0:
						this.pageNo = this.unPageNo;
						this.type = '1';
						this.getData();
						break;
					case 1:
						this.pageNo = this.readPageNo;
						this.type = '2';
						this.getData();
						break;
				}
			},

			longclick(item) {
				this.showdelete = true;
				this.id = item.id;
			},

			itemClick(item) {
				uni.navigateTo({
					url: './messagedetail?id=' + item.id,
				})
			},

			confirm() {
				this.showdelete = false;

				messageNoticedelete({
					id: this.id
				}).then(res => {

					uni.showToast({
						icon: 'none',
						title: '已删除'
					})

					if (this.swiperCurrent == 1) {
						this.readPageNo = 1;
						this.pageNo = this.readPageNo;
						this.type = '2';
					} else {
						this.unPageNo = 1;
						this.pageNo = this.unPageNo;
						this.type = '1';
					}
					this.getData();
				})


			},
			cancel() {
				this.showdelete = false;
			},
			close() {
				this.showdelete = false;
			}

		},

		onShow() {
			console.log(this.swiperCurrent,'this.swiperCurrent')
			if (this.swiperCurrent == 0) {
				this.unPageNo = 1;
				this.pageNo = this.unPageNo;
				this.type = '1';
				this.getData();
			}
		}

	}
</script>

<style lang="scss" scoped>
	.wrap {
		@include flex(column);
		height: calc(100vh - var(--window-top));
		padding: 32upx;
		.box-title{
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 24upx;
			background-color: #FFFFFF; 
			border-radius: 8upx;
			.title{
				text-align: center;
				text{
					width:200upx;
					font-size: 28upx;
					color:#000000;
				}
			}
			.title1{
				background-color: #173B42 ;
				color:#ffffff;
				border-radius: 8upx;
				text{
					color:#ffffff;
				}
			}
		} 
	}
	.tab {
		position: sticky;
		top: 0;
		background-color: #F5F5F5;
		z-index: 2;
	}
	.title {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: $black33;
		margin-left: 20upx;
	}

	.swiper-box {
		flex-grow: 1;
	}

	.swiper-item {
		height: 100%;
	}


	.news_list {
		margin: 32upx 0;
		padding: 32upx;
		background: white;
		border-radius: 8upx;

		.msg-item {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.msg-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.msg-title-left{
					display: flex;
					image{
						width: 44upx;
						height: 44upx;
						margin-right: 16upx;
					}
					text{
						font-weight: bold;
						color: #000000;
						font-size: 32upx;
					}
				}
				.msg-title-right{
					font-size: 24upx;
					color:#999999
				}

			}

			.html-content {
				font-size: 24rpx;
				color: #999999;
				margin-top: 24upx;

				overflow: hidden;
				word-break: break-all;
				/* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1; //两行
			}
			.line{
				width: 100%;
				border-bottom:1upx solid #eeeeee;
				margin:24upx 0;
			}
			.info{
				display: flex;
				justify-content: space-between;
				text{
					color:#173B42  ;
					font-size: 24upx;
				}
			}

		}

	}
</style>
